import Vue from "vue";
import Vuex, { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
// vuex的一个使用步骤
// 1.安装
// 2.声明使用
// 3.创建store实例对象 ，并且暴露
// 4.需要在main.js文件中 去引入你刚才暴露的store实例化对象 需要在生成vm的配置对象中增加store

Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        num : 0,
    },
    mutations:{
        ADD(state){ 
            state.num ++
        },
        SUB(state){
            state.num --
        },
        ODD_ADD(state){
            state.num ++
        },
        ASYNC_ADD(state){
            state.num ++
        },
        COUNT_ADD(state,count){
            state.num += count
        },

    },
    actions:{
        addNum1(context){
           context.commit('ADD')
        },
        subNum(context){
            context.commit('SUB')
        },
        OddaddNum({commit,state}){
            if(state.num % 2 !== 0){
                commit('ODD_ADD')
            }
        },
        addNumAsync({commit}){
            setTimeout(()=>{
                commit('ASYNC_ADD')
            },1000)
        },
        addCount(context,count){
            context.commit('COUNT_ADD',count)
        },
        // 传多个参
        // addCount(context,[count,a,b,c]){
        //     console.log(count,a,b,c);
        //     context.commit('COUNT_ADD',count)
        // },
    },
    getters:{
        newNum(state){
            return state.num * 10
        }

    }
})
// 基本使用
// 三个注意点
    // 1.直接在actions中修改state  vuex没有办法监控到这次数据的变化(明令禁止)
    // 2.mutations函数直接修改数据 不要写判断循环异步(明令禁止)
    // 3.如果咱们actions没有自己的逻辑(判断 循环 异步....) 只是把修改数据的任务提交给某个mutations函数 那么咱们可以不用写他  可以这么写 没问题 但是咱们很少这么用

// getters的使用
// 传参：
    // mutations :  
    // commit让某个mutations函数执行的 本质其实就是在调用哪个mutations函数
    // 参数1 某个mutations函数的名字 参数2 是调用mutations函数传递的实参

    // actions : 
    // dispatch让某个actions函数执行 本质dispatch其实就是在调用那个actions函数
    // 参数： 1.某个actions函数的名字  2. 调用actions函数传递的实参
    // 注意点:传递实参只能传递一个 如果想传多个数据 传对象或者数组

// 简写 数组/对象
// ...mapState()
// ...mapGetters()
// ...mapActions()
// ...mapMutations()
// 简写传参